<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body>
<form class="layui-form layui-row layui-col-space16" style="margin-top: 30px">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" name="username" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn" lay-submit lay-filter="demo-table-search">搜索</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>

</form>
<table class="layui-hide" id="ID-table-demo-parse" lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除
        </a>
    </div>
</script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:inline="javascript">
    // thymeleaf 获取当前项目路径
    /*<![CDATA[*/
    const ctx = /*[[@{/}]]*/;
    /*]]>*/
</script>
<script th:inline="none">
    let table;
    layui.use('table', function(){
        table = layui.table;
        form = layui.form;

        // 渲染
        table.render({
            elem: '#ID-table-demo-parse',
            id: 'test',
            url: ctx + 'user/list',
            page: true,
            toolbar: 'default',
            response: {
                statusCode: 200 // 重新规定成功的状态码为 200，table 组件默认为 0
            },
            // 将原始数据解析成 table 组件所规定的数据格式
            parseData: function(res){
                console.log(res.list);
                return {
                    "code": 200, //解析接口状态
                    "msg": '', //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.list //解析数据列表
                };
            },
            cols: [[
                {type:'checkbox'},
                {field:'id', title:'序号', type:'numbers'},
                {field:'username', title:'用户名', width:120},
                {field:'name', title:'姓名', width:100, sort: true, templet: function (d){
                    return "<a href='javascript:void(0)' style='color:blue'>" + d.name + "</a>";
                }},
                {field:'email', title:'邮箱', width:150},
                {field:'phone', title:'电话'},
                {field:'dept', title:'部门名称', templet: function(d){
                        return d.dept.deptName;
                }},
                {field:'createDate', title:'创建时间'},
                {fixed: 'right', title:'操作', width: 134, minWidth: 125, templet: '#barDemo'}
            ]],
            limit: 2,
            limits: [1, 2, 5, 10]
            // height: 315
        });

        // 单元格工具事件
        table.on('tool(test)', function(obj) {
            var data = obj.data; // 得到当前行数据
            // var index = obj.index; // 得到当前行索引
            var layEvent = obj.event; // 获得元素对应的 lay-event 属性值
            // var tr = obj.tr; // 得到当前行 <tr> 元素的 jQuery 对象
            // var options = obj.config; // 获取当前表格基础属性配置项
            // console.log(obj); // 查看对象所有成员

            if (layEvent == 'edit'){
                console.log("编辑, " + data.id);
                layer.open({
                    type: 2,
                    title: '修改用户信息',
                    // shadeClose: true,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['600px', '400px'],
                    content: ctx + 'user/edit?id=' + data.id
                });
            } else if (layEvent == 'delete'){
                console.log("删除");
            }

        });

        // 头部工具栏事件
        table.on('toolbar(test)', function(obj){
            var options = obj.config; // 获取当前表格属性配置项
            var checkStatus = table.checkStatus(options.id); // 获取选中行相关数据
            console.log(obj); // 查看对象所有成员
            console.log(checkStatus)

            // 根据不同的事件名进行相应的操作
            switch(obj.event){ // 对应模板元素中的 lay-event 属性值
                case 'add':
                    layer.open({
                        type: 2,
                        title: '添加用户',
                        // shadeClose: true,
                        maxmin: true, //开启最大化最小化按钮
                        area: ['600px', '500px'],
                        content: ctx + 'user/edit'
                    });
                    break;
                case 'delete':
                    layer.msg('删除');
                    break;
                case 'update':
                    layer.msg('编辑');
                    break;
            };
        });


        // 搜索提交
        form.on('submit(demo-table-search)', function(data){
            var field = data.field; // 获得表单字段
            // 执行搜索重载
            table.reload('test', {
                page: {
                    curr: 1 // 重新从第 1 页开始
                },
                where: field // 搜索的字段
            });
            return false; // 阻止默认 form 跳转
        });
    });

    function reloadTable() {
        // 数据重载 - 仅与数据相关的属性(options)能参与到重载中
        table.reloadData('test', {
            where: {}, // 数据异步请求时携带的字段集 --- 属性设置有效，因属于数据相关属性
            scrollPos: true, // 设定重载数据或切换分页时的滚动条的位置状态 --- 属性设置有效
        });
    }
</script>
</body>
</html>